<template>
	<view>


		<!-- 头部 -->
		<headerSlotVue :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-content" @click="closePage()">
					<view class="back-btn">
						<text class="back-icon">←</text>
					</view>
					<view class="page-title">
						<text class="title-text">接单中心</text>
					</view>
				</view>
			</template>
		</headerSlotVue>
		<view class="order-center-container">


			<!-- 标签页导航 -->
			<view class="tab-navigation" v-if="PageCur === 'similar'">
				<scroll-view scroll-x class="tab-scroll" :scroll-left="scrollLeft" show-scrollbar="false">
					<view class="tab-list">
						<view class="tab-item" :class="{'active': index === TabCur}" v-for="(item, index) in tabList"
							:key="item.id" @tap="handleTabChange(item, index)">
							<text class="tab-text">{{item.title}}</text>
							<view class="active-line" v-if="index === TabCur"></view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 订单列表 -->
			<view class="order-list-container" :class="{'with-tabs': PageCur === 'similar'}">
				<OrderCardVue :status="status" :serviceOrderList="serviceOrderList" :loading="loading"
					:noMoreData="noMoreData" @updataList="updataList" @loadMore="loadMore" />
			</view>

			<!-- 底部导航 -->
			<view class="bottom-navigation">
				<view class="nav-item" :class="{'active': PageCur === 'home'}" @click="NavChange('home')">
					<view class="nav-icon">
						<text class="icon-text">🏪</text>
					</view>
					<text class="nav-text">抢单大厅</text>
				</view>
				<view class="nav-item" :class="{'active': PageCur === 'similar'}" @click="NavChange('similar')">
					<view class="nav-icon">
						<text class="icon-text">📋</text>
					</view>
					<text class="nav-text">我的接单</text>
				</view>
			</view>

			<!-- 加载状态 -->
			<view class="loading-overlay" v-if="loading && serviceOrderList.length === 0">
				<view class="loading-content">
					<view class="loading-spinner"></view>
					<text class="loading-text">加载中...</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerSlotVue from '@/components/header-slot.vue';
	import OrderCardVue from '@/components/orderCenterComponents/order-card.vue';
	import {
		getServiceOrderList,
		myServiceOrder
	} from '@/api/order.js';

	import storage from '@/utils/storage';

	export default {
		components: {
			headerSlotVue,
			OrderCardVue
		},
		data() {
			return {
				userInfo: {},
				platformInfo: null,
				PageCur: 'home', // 当前页面状态
				TabCur: 0, // 当前标签页
				scrollLeft: 0,
				pagination: {
					page: 1,
					limit: 10,
				},
				noMoreData: false,
				totalPages: 0,
				serviceOrderList: [],
				recordStatus: '', // 记录当前状态筛选
				tabList: [{
						id: 1,
						title: '全部',
						status: ''
					}, {
						id: 2,
						title: '已接单',
						status: 'accepted'
					},
					{
						id: 3,
						title: '已取件',
						status: 'picked'
					},
					{
						id: 4,
						title: '已送达',
						status: 'delivered'
					},
					{
						id: 6,
						title: '已完成',
						status: 'completed'
					},
					{
						id: 7,
						title: '已取消',
						status: 'cancelled'
					}
				],
				loading: false,
			};
		},
		computed: {
			// 计算当前状态
			status() {
				return this.recordStatus;
			}
		},
		onLoad() {
			this.userInfo = storage.getUserInfo();
		},
		onShow() {
			this.resetList();
			this.loadList();
		},
		onPullDownRefresh() {
			this.resetList();
			this.loadList();
		},
		onReachBottom() {
			if (!this.noMoreData && !this.loading) {
				this.pagination.page++;
				this.loadList();
			}
		},
		methods: {
			// 重置列表数据
			resetList() {
				this.serviceOrderList = [];
				this.pagination.page = 1;
				this.noMoreData = false;
			},

			// 更新列表
			updataList() {
				this.resetList();
				this.loadList();
			},

			// 加载更多
			loadMore() {
				if (!this.noMoreData && !this.loading) {
					this.pagination.page++;
					this.loadList();
				}
			},

			// 加载列表数据
			loadList() {
				if (this.loading) return;

				this.loading = true;
				if (this.PageCur === 'similar') {
					this.loadMyServiceOrder();
				} else {
					this.loadServiceOrderList();
				}
				uni.stopPullDownRefresh();
			},

			// 加载抢单大厅数据
			loadServiceOrderList() {
				getServiceOrderList({
					page: this.pagination.page,
					limit: this.pagination.limit,
					t: Date.now(),
				}).then(res => {
					const data = res.data && res.data.data;
					const list = data && data.list ? data.list : [];
					const pagination = data && data.pagination;
					const total = pagination && pagination.total ? pagination.total : 0;

					if (list.length > 0) {
						this.serviceOrderList = [...this.serviceOrderList, ...list];
						this.totalPages = Math.ceil(total / this.pagination.limit);
						this.noMoreData = this.pagination.page >= this.totalPages;
					} else {
						this.noMoreData = true;
					}
				}).catch(err => {
					console.error('加载抢单大厅数据失败:', err);
					uni.showToast({
						title: '加载失败',
						icon: 'error'
					});
				}).finally(() => {
					this.loading = false;
				});
			},

			// 加载我的接单数据
			loadMyServiceOrder() {
				myServiceOrder({
					page: this.pagination.page,
					limit: this.pagination.limit,
					status: this.recordStatus,
					t: Date.now(),
				}).then(res => {
					const data = res.data && res.data.data;
					const list = data && data.list ? data.list : [];
					const pagination = data && data.pagination;
					const total = pagination && pagination.total ? pagination.total : 0;

					if (list.length > 0) {
						this.serviceOrderList = [...this.serviceOrderList, ...list];
						this.totalPages = Math.ceil(total / this.pagination.limit);
						this.noMoreData = this.pagination.page >= this.totalPages;
					} else {
						this.noMoreData = true;
					}
				}).catch(err => {
					console.error('加载我的接单数据失败:', err);
					uni.showToast({
						title: '加载失败',
						icon: 'error'
					});
				}).finally(() => {
					this.loading = false;
				});
			},

			// 处理标签页切换
			handleTabChange(item, index) {
				if (this.TabCur !== index) {
					this.TabCur = index;
					this.recordStatus = item.status;
					this.resetList();
					this.loadList();
				}
			},

			// 处理底部导航切换
			NavChange(type) {
				if (this.PageCur !== type) {
					this.PageCur = type;
					this.TabCur = 0; // 重置标签页
					this.recordStatus = ''; // 重置状态筛选
					this.resetList();
					this.loadList();
				}
			},

			// 关闭页面
			closePage() {
				// 使用navigateBack保持路由栈，避免清空导致无法返回
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header_slot {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
	}

	.order-center-container {
		background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	// 头部样式优化
	.header-content {
		padding: 0 32rpx;
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10rpx);
	}

	.back-btn {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.05);
		margin-right: 20rpx;
		transition: all 0.3s ease;

		&:active {
			background: rgba(0, 0, 0, 0.1);
			transform: scale(0.95);
		}
	}

	.back-icon {
		font-size: 36rpx;
		color: #2C2622;
		font-weight: 600;
	}

	.page-title {
		flex: 1;
		text-align: center;
	}

	.title-text {
		font-weight: 700;
		font-size: 36rpx;
		color: #2C2622;
		letter-spacing: 1rpx;
	}

	// 标签页导航优化
	.tab-navigation {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 99;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(10rpx);
		padding: 24rpx 0;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.tab-scroll {
		white-space: nowrap;
		padding: 0 32rpx;
	}

	.tab-list {
		display: flex;
		align-items: center;
	}

	.tab-item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 16rpx 32rpx;
		margin-right: 16rpx;
		border-radius: 24rpx;
		position: relative;
		transition: all 0.3s ease;

		&:last-child {
			margin-right: 0;
		}


	}

	.tab-text {
		font-weight: 500;
		font-size: 28rpx;
		color: #555C67;
		transition: all 0.3s ease;
	}

	.tab-item.active .tab-text {
		font-weight: 700;
		font-size: 30rpx;
		color: #FE6100;
	}

	.active-line {
		position: absolute;
		bottom: -4rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 6rpx;
		background: #FE6100;
		border-radius: 3rpx;
		box-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.3);
	}

	// 订单列表容器
	.order-list-container {
		flex: 1;
		padding-bottom: 120rpx;
		background: transparent;
		transition: all 0.3s ease;
	}

	.order-list-container.with-tabs {
		padding-top: 120rpx;
	}

	// 底部导航优化
	.bottom-navigation {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		display: flex;
		justify-content: space-around;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20rpx);
		box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.1);
		border-top: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.nav-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 16rpx 32rpx;
		border-radius: 20rpx;
		transition: all 0.3s ease;
		position: relative;

		&:active {
			transform: scale(0.95);
		}


	}

	.nav-icon {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		margin-bottom: 12rpx;
		background: rgba(0, 0, 0, 0.03);
		transition: all 0.3s ease;
	}

	.nav-item.active .nav-icon {
		background: linear-gradient(135deg, #FE6100, #ff8c42);
		box-shadow: 0 4rpx 12rpx rgba(254, 97, 0, 0.3);
	}

	.icon-text {
		font-size: 32rpx;
	}

	.nav-text {
		font-size: 24rpx;
		color: #8F97A2;
		font-weight: 500;
		transition: all 0.3s ease;
	}

	.nav-item.active .nav-text {
		color: #FE6100;
		font-weight: 700;
	}

	// 加载状态优化
	.loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10rpx);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.loading-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 48rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 24rpx;
		box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
	}

	.loading-spinner {
		width: 80rpx;
		height: 80rpx;
		border: 6rpx solid #f3f3f3;
		border-top: 6rpx solid #FE6100;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin-bottom: 24rpx;
	}

	.loading-text {
		font-size: 28rpx;
		color: #8F97A2;
		font-weight: 500;
	}

	// 动画效果
	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	// 响应式设计
	@media (max-width: 750rpx) {
		.header-content {
			padding: 0 24rpx;
			height: 80rpx;
		}

		.back-btn {
			width: 56rpx;
			height: 56rpx;
		}

		.back-icon {
			font-size: 32rpx;
		}

		.title-text {
			font-size: 32rpx;
		}

		.tab-navigation {
			top: 80rpx;
			padding: 20rpx 0;
		}

		.tab-scroll {
			padding: 0 24rpx;
		}

		.tab-item {
			padding: 12rpx 24rpx;
			margin-right: 12rpx;
		}

		.tab-text {
			font-size: 26rpx;
		}

		.tab-item.active .tab-text {
			font-size: 28rpx;
		}

		.order-list-container.with-tabs {
			padding-top: 140rpx;
		}

		.bottom-navigation {
			padding: 20rpx 0 32rpx 0;
		}

		.nav-item {
			padding: 12rpx 24rpx;
		}

		.nav-icon {
			width: 56rpx;
			height: 56rpx;
		}

		.icon-text {
			font-size: 28rpx;
		}

		.nav-text {
			font-size: 22rpx;
		}
	}

	// 深色模式适配
	@media (prefers-color-scheme: dark) {
		.order-center-container {
			background: linear-gradient(135deg, #1a1a1a 0%, #2d3748 100%);
		}

		.header-content {
			background: rgba(26, 26, 26, 0.95);
		}

		.back-btn {
			background: rgba(255, 255, 255, 0.1);
		}

		.back-icon,
		.title-text {
			color: #ffffff;
		}

		.tab-navigation {
			background: rgba(26, 26, 26, 0.95);
		}

		.tab-item {
			background: rgba(255, 255, 255, 0.1);
		}

		.tab-text {
			color: #a0aec0;
		}

		.bottom-navigation {
			background: rgba(26, 26, 26, 0.95);
		}

		.nav-icon {
			background: rgba(255, 255, 255, 0.1);
		}

		.nav-text {
			color: #a0aec0;
		}

		.loading-overlay {
			background: rgba(26, 26, 26, 0.9);
		}

		.loading-content {
			background: rgba(45, 55, 72, 0.95);
		}

		.loading-text {
			color: #a0aec0;
		}
	}
</style>